<!--
 * new page
 * @author: zhuangming
 * @since: 2025-03-04
 * detail.vue
-->
<template>
  <view class="container" :class="{ popupShow: addreShow }">
    <u-swiper keyName="img" height="550" :list="bannerList" @click="imgclick"></u-swiper>
    <u-overlay :show="showzhezhao"></u-overlay>
    <!-- <image class="detail-header" :src="imgurl + quanIcon || detailData.merBanner"></image> -->
    <view class="detail-content">
      <div style="color: red; font-size: 20x; font-weight: bold">￥{{ checkData.price }} <span style="color: #f9f9f9; font-size: 13px">/份</span></div>
      <view class="detail-title" style="margin-top: 5px; font-weight: bold; font-size: 20px">
        {{ checkData.name }}
      </view>
      <!-- <view style="display: flex; align-items: center; justify-content: space-between">
        <view style="display: flex; flex-direction: column; align-items: flex-start"> -->
      <!-- <span style="font-size: 20rpx; background-color: rgba(255, 220, 220, 0.6); color: #FA642F; border: 1rpx solid #FA642F; padding: 1px; margin: 10px 0">{{ detailData.illustrate }}</span> -->
      <!-- <span style="font-size: 28rpx">活动时间： {{ detailData.startTime }} 至 {{ detailData.endTime }}</span>
        </view> -->
      <!-- <view v-if="detailData.merPhone" @click="makeCall">
          <image style="width: 60rpx; height: 60rpx" src="../../../static/local_life/phone.png"> </image>
          <view style="font-size: 28rpx"> 电话 </view>
        </view> -->
      <!-- </view> -->

      <!-- <van-divider /> -->
      <!-- <view class="title mgb-1 color01 font-s14 font-medium">适用门店</view> -->
      <!-- <lifeInfo :infoType="2" :infoData="detailData" /> -->
    </view>
    <div class="detail-contents" style="background-color: #f9f9f9; border-bottom-right-radius: 12px">
      <div @click="selectJuan" style="border-bottom: 1px solid #ededed; height: 40px; display: flex; align-items: center">
        <div>
          <u-icon name="coupon" labelSize="40rpx"></u-icon>
        </div>
        <div class="dwadafad" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">已选：{{ checkData.name }}</div>
        <div style="width: 50px; text-align: center; float: right">
          <u-icon name="arrow-right" labelSize="30rpx"></u-icon>
        </div>
      </div>
      <div @click="gotoDaohang(detailData)" style="display: flex; height: 40px; align-items: center">
        <div>
          <u-icon name="map" labelSize="40rpx"></u-icon>
        </div>
        <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
          自提点：
          {{ detailData.merAddress || '暂无地址'}}
        </div>
      </div>
    </div>
    <div style="background-color: #fff; width: 100%; margin-top: 15px">
      <div style="height: 35px; line-height: 35px; border-bottom: 1px solid #ededed; font-weight: bold; margin-left: 15px; margin-bottom: 15px; font-size: 17px">商品详情</div>
      <image mode="widthFix" v-if="checkData.graphicInfo && checkData.graphicInfo.substring(0, 10).indexOf('crmebimage') != -1" 
	  :src="imgurl + checkData.graphicInfo" style="width: 100%"></image>
      <u-parse v-else style="background-color: #fff" :content="checkData.graphicInfo"></u-parse>
	  <div v-if="!checkData.graphicInfo" >
		  <image class="" mode="aspectFit"
		    src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/25/zwsj_20250325090754A001.png"> </image>
			<div style="text-align: center;">暂无信息</div>
	  </div>
      <!-- <tabDetail :detailImg="checkData.graphicInfo || ''" /> -->
    </div>
    <!--  <div style="width: 100%; height: 35px; line-height: 35px; margin: 20rpx 0">
      <u-tabs
        :activeStyle="{
          color: '#FA642F',
        }"
        :list="list1"
        @click="onchangetab"
        lineColor="#FA642F"
        lineHeight="8rpx"
        lineWidth="56rpx"
        :itemStyle="{ width: '150rpx' }"
      ></u-tabs>
    </div> -->
    <!--     <view
      v-show="tabs == '活动'"
      class="bgf pdtb-2 border-radius"
      v-if="activeList && activeList.length"
      style="padding: 15px; border-radius: 12px; background-color: #fff; width: 85%; margin: 10px auto; margin-bottom: 10px; border-radius: 20rpx; background-color: #fff"
    >
      <u-radio-group placement="column" v-model="checked" activeColor="#FA642F" iconSize="20px" labelSize="20px" style="font-size: 12px">
        <u-radio :value="item.id" size="20px" labelSize="20px" v-for="(item, index) of activeList" :key="index" style="font-size: 12px; margin-top: -10px" :label="item.id" :name="item.id">
          <view :style="{ width: '100%', display: 'flex', justifyContent: 'space-between', marginBottom: activeList.length !== index + 1 ? '10px' : '0px' }">
            <view class="font-s16 color08" style="font-size: 16px; width: 75%">
              {{ item.name }}
              <view class="font-s12 mgt-1 color04" style="font-size: 12px; margin-top: 10rpx; color: #999">库存{{ item.number }}</view>
            </view>
            <view class="">
              <view class="colormark font-s16" style="color: #fa642f; font-size: 16px">￥{{ item.price }}</view>
              <view class="color07" style="font-size: 12px; margin-top: 10rpx" @click="handleDetail(item.id)">
                查看详情
                <uni-icons type="arrowright" size="12"></uni-icons>
              </view>
            </view>
          </view>
        </u-radio>
        <uni-divider v-if="activeList.length !== index + 1" />
      </u-radio-group>
    </view> -->
    <!-- <tabActive class="product-con" :activeData="activeData" :businessId="id" /> -->
    <!--  <TabSay v-show="tabs == '评价'" :praiseList="praiseList" />
    <tabDetail v-show="tabs == '详情'" :detailImg="detailData.showInfo || ''" /> -->
    <view style="padding-bottom: 100px"> </view>
    <view v-if="activeList && activeList.length" style="position: fixed; bottom: 0; width: 100%; left: 0; height: 82px; background-color: #fff; display: flex; align-items: center">
      <button
        @click="onGrab"
        :loading="loading"
        style="background-color: #fa642f; width: 90%; height: 40px; border-radius: 10px; color: white; border-radius: 20px; display: flex; align-items: center; justify-content: center"
      >
        立即抢购
      </button>
    </view>
    <subOrder v-if="ssssbbb" ref="subOrder" :merIddd="businessId" :subOrderData="subOrderData" :ebMerActivityTicketId="checked" :ebMerActivityId="activeId" />
    <!-- 水卡专属弹窗，用来添加水卡信息 -->
    <u-modal :show="cardShow" title="新增水卡信息" :showConfirmButton="false">
      <view class="placeholder">
        <u-form :labelWidth="120" labelPosition="left" :model="userInfoss" :rules="myrules" ref="$uForm">
          <u-form-item :required="true" label="姓名" prop="name" borderBottom>
            <u-input v-model="userInfoss.name" border="none"></u-input>
          </u-form-item>
          <u-form-item :required="true" label="手机号" prop="phone" borderBottom>
            <u-input v-model="userInfoss.phone" border="none"></u-input>
          </u-form-item>
          <u-form-item label="卡号" prop="phoneCard" borderBottom>
            <u-input v-model="userInfoss.phoneCard" border="none"></u-input>
          </u-form-item>
          <u-form-item :required="true" label="地址" prop="address" borderBottom @click="addreShowOpen">
            <u-input v-model="userInfoss.address" border="none" disabled></u-input>
          </u-form-item>
        </u-form>
        <view style="display: flex; align-items: center; justify-content: space-between; margin-top: 20rpx; width: 100%; gap: 10rpx">
          <u-button text="取消" @click="cardShow = false"></u-button>
          <u-button text="确定" @click="submitCard" color="#fa642f"></u-button>
        </view>
        <view style="color: red"><span>注：</span> 若您没有水卡，也可直接购买，客服专员会第一时间与您联系并帮您办理</view>
      </view>
    </u-modal>
    <u-popup :show="addreShowadwad" closeOnClickOverlay @close="addreShowadwad = false" :round="10" mode="bottom" :closeable="true">
      <view style="width: 100%; padding: 20rpx">
        <view style="height: 90%">
          <div style="display: flex">
            <image mode="widthFix" :src="bannerList[0]" style="width: 100px; border-radius: 10px" />
            <div style="margin-left: 30px">
              <div>
                <span style="color: red; font-size: 12px">￥</span>
                <span style="font-size: 24px; font-weight: bold; color: red; padding-right: 10px">{{ checkData.price }}</span>
                <span style="padding: 3px 5px; background-color: red; color: #fff; font-size: 10px">下单价</span>
              </div>
              <div style="margin-top: 5px; display: flex">
                <div v-show="parseFloat(detailData.memberReturnbl) != 0" style="border: 1px solid red; border-radius: 5px; padding: 2px 3px; color: red; font-size: 8px">下单有返利</div>
                <div
                  v-show="parseFloat(detailData.promotionCommissions) != 0"
                  style="border: 1px solid red; border-radius: 5px; padding: 2px 3px; margin-left: 5px; color: red; font-size: 8px"
                >
                  推广有佣金
                </div>
              </div>
              <div style="color: #999; font-size: 10px; margin-top: 5px">编号：{{ checkData.id }}</div>
              <div style="width: 200px; margin-top: 5px">
                <u-number-box :min="1" button-size="46" v-model="buyNumber" @change="onChangeNumbers" integer :max="checkData.purchaseLimit || 999999"></u-number-box>
              </div>
            </div>
          </div>
          <div style="font-size: 14px; margin: 15px 0 5px 0; font-weight: bold">消费卷({{ activeList.length }})</div>
          <div style="display: flex; flex-wrap: wrap">
            <div v-for="(item, index) in activeList" @click="gotoFanwfaw(item)" :class="item.id == checked ? 'acitbe_calsad' : 'juan_label'">
              {{ item.name }}
            </div>
          </div>
        </view>
        <view style="display: flex; align-items: center; margin-top: 20px; justify-content: space-between; margin-bottom: 15px; height: auto; width: 100%; gap: 40rpx">
          <u-button @click="addreShowadwad = false" text="取消"></u-button>
          <u-button @click="addPay" color="#fa642f" text="确定"></u-button>
        </view>
      </view>
    </u-popup>
    <!-- 地址选择抽屉 -->
    <u-popup :show="addreShow" @close="addShowDown" mode="right">
      <view style="width: 500rpx; padding: 20rpx; height: 100%">
        <view style="height: 85vh">
          <view style="height: 80rpx">
            <u-search searchIconSize="30" height="66" style="padding: 10rpx 0" placeholder="请输入关键字" v-model="keyword" @change="onInput"></u-search>
          </view>
          <view style="height: calc(100% - 50rpx); overflow-y: auto">
            <u-radio-group v-model="radioAddress" placement="column">
              <u-radio
                iconSize="28"
                size="32"
                labelSize="32"
                :customStyle="{ marginBottom: '16px' }"
                v-for="(item, index) in serchList"
                :key="index"
                :label="item.dictLabel"
                :name="item.dictLabel"
              >
              </u-radio>
            </u-radio-group>
          </view>
        </view>
        <view style="display: flex; align-items: center; justify-content: space-between; margin-top: auto; height: auto; width: 100%; gap: 40rpx; height: 10vh">
          <u-button @click="noAddress" text="取消"></u-button>
          <u-button @click="okAddress" color="#fa642f" text="确定"></u-button>
        </view>
      </view>
    </u-popup>
    <!-- 水卡专属弹窗；list，用来选择水卡信息 -->
    <u-modal :show="cardShowList" title="请选择您的卡" :showConfirmButton="false" :closeOnClickOverlay="true" @close="cardShowListShow">
      <view class="placeholder">
        <u-radio-group v-model="radiovalue1" placement="column" @change="groupChange">
          <u-radio
            size="30"
            labelSize="30"
            :customStyle="{ marginBottom: '8px' }"
            v-for="(item, index) in cardList"
            :key="index"
            :label="item.name + ' - ' + (item.cardNumber || item.phone)"
            :name="item.name + '-' + item.phone + '-' + item.cardNumber + '-' + item.address"
            @change="radioChange"
          >
          </u-radio>
        </u-radio-group>
        <view style="display: flex; align-items: center; justify-content: space-between; margin-top: 20rpx; width: 100%; gap: 10rpx">
          <u-button text="添加" type="primary" @click="cardShowAdd"></u-button>
          <u-button text="确定" @click="cardShowListss" color="#fa642f"></u-button>
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
import { getMerInfoByid, clickActivityInfoByid, selectTicketById, appraiseList, watercardAdd, watercardList, cardAddressList } from "../../utils/api/local";
import { getUserInfo, programlogin } from "../../utils/request_api.js"; /* 登录界面挪动接口 */
import TabSay from "../index/components/tabSay.vue";
import tabDetail from "../index/components/tabDetail.vue";
import tabActive from "../index/components/tabActive.vue";
import subOrder from "../index/components/subOrder.vue";
import lifeInfo from "./components/list_info.vue";
import { IMG_URL } from "../../config/index";
// 坐标转换函数
function wgs84togcj02(lat, lng) {
  if (outOfChina(lat, lng)) {
    return [lat, lng];
  }
  let dLat = transformLat(lng - 105.0, lat - 36.0);
  let dLng = transformLng(lng - 105.0, lat - 36.0);
  let radLat = (lat / 180.0) * Math.PI;
  let magic = Math.sin(radLat);
  magic = 1 - 0.00669342162296594323 * magic * magic;
  let sqrtMagic = Math.sqrt(magic);
  dLat = (dLat * 180.0) / (((6378245.0 * (1 - 0.00669342162296594323)) / (magic * sqrtMagic)) * Math.PI);
  dLng = (dLng * 180.0) / ((6378245.0 / sqrtMagic) * Math.cos(radLat) * Math.PI);
  let mgLat = lat + dLat;
  let mgLng = lng + dLng;
  return [mgLat, mgLng];
}

function outOfChina(lat, lng) {
  if (lng < 72.004 || lng > 137.8347) return true;
  if (lat < 0.8293 || lat > 55.8271) return true;
  return false;
}

function transformLat(x, y) {
  let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
  ret += ((20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0) / 3.0;
  ret += ((20.0 * Math.sin(y * Math.PI) + 40.0 * Math.sin((y / 3.0) * Math.PI)) * 2.0) / 3.0;
  ret += ((160.0 * Math.sin((y / 12.0) * Math.PI) + 320 * Math.sin((y * Math.PI) / 30.0)) * 2.0) / 3.0;
  return ret;
}

function transformLng(x, y) {
  let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
  ret += ((20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0) / 3.0;
  ret += ((20.0 * Math.sin(x * Math.PI) + 40.0 * Math.sin((x / 3.0) * Math.PI)) * 2.0) / 3.0;
  ret += ((150.0 * Math.sin((x / 12.0) * Math.PI) + 300.0 * Math.sin((x / 30.0) * Math.PI)) * 2.0) / 3.0;
  return ret;
}
export default {
  components: {
    TabSay,
    tabDetail,
    tabActive,
    subOrder,
    lifeInfo,
  },
  data() {
    return {
      isWatercard: 1 /* 水站活动1否0是 */,
      keyword: "",
      showzhezhao: true,
      checkData: {},
      bannerList: [],
      serchList: [],
      // 基本案列数据
      filteredList: [],
      buyNumber: 1,
      radiovalue1: "",
      cardList: [], // 水卡列表
      cardShowList: false, // 水卡专属弹窗，用来选择水卡信息
      myrules: {
        name: [
          {
            type: "string",
            pattern: /^[\u4e00-\u9fa5]{2,4}$/,
            required: true,
            message: "请输入正确姓名",
            trigger: ["blur", "change"],
          },
        ],
        phoneCard: [
          {
            type: "number",
            message: "请输入正确卡号",
            trigger: ["blur", "change"],
          },
        ],
        phone: [
          {
            type: "number",
            max: 11,
            min: 11,
            required: true,
            message: "请输入正确手机号",
            trigger: ["blur", "change"],
          },
        ],
        address: [
          {
            type: "string",
            required: true,
            message: "请输入正确地址",
            trigger: ["blur", "change"],
          },
        ],
      },
      userInfoss: {
        name: "",
        phoneCard: "",
        address: "",
      },
      cardShow: false,
      ssssbbb: false,
      list1: "",
      userInfo: "",
      ebUserId: "",
      imgurl: IMG_URL,
      tabs: "",
      id: "",
      detailData: {},
      activeData: [],
      checked: 1,
      activeList: [],
      /** 商户id */
      businessId: "",
      loading: false,
      /** 提交订单页面信息 */
      subOrderData: {},
      /** 活动id */
      activeId: "",
      /** 评价列表 */
      praiseList: [],
      params: {
        limit: 5,
        page: 1,
      },
      /** 数据是否加载完全 */
      hasMore: true,
      /** type为1表示进入店铺 */
      type: 0,
      addreShowadwad: false,
      addreShow: false,
      timer: null,
      radioAddress: "",
      quanIcon: "",
      yaoiqngID: "",
    };
  },
  onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.$uForm.setRules(this.myrules);
  },
  onLoad(option) {
    console.log("🚀 ~ onLoad ~ option:", option);
    uni.showLoading({
      title: "加载中",
    });
    const q = decodeURIComponent(option.q); // 获取到二维码原始链接内容

    // const q = "https://www.wantongkonggu.cn/adminMgrh7/hdCenter/1740973531870356-442-1";
    if (q != undefined && q != null && q != "" && q != "undefined" && q != "null") {
      this.businessId = q.split("/")[q.split("/").length - 1].split("-")[0];
      this.activeId = q.split("/")[q.split("/").length - 1].split("-")[1];
      this.isLaundry = q.split("/")[q.split("/").length - 1].split("-")[2];
    } else {
      this.businessId = option.businessId;
      this.activeId = option.id;
      this.isLaundry = option.isLaundry;
      this.yaoiqngID = option.yaoiqngID;
      this.isWatercard = option.isWatercard;
    }
    this.$nextTick(() => {
      this.ssssbbb = true;
      this.logggggin();
    });
    this.type = option.type || 0;
    // this.getDetail(option.id);
    this.getMerInfoByidd(this.businessId, this.activeId);
    this.clickActivityInfoByid(this.activeId);
    this.appraiseList();
    this.getAddressList();
  },
  onShow() {},
  methods: {
    gotoFanwfaw(item) {
      this.checked = item.id;
      this.checkData = item;
    },
    selectJuan() {
      this.addreShowadwad = true;
    },
    gotoDaohang(data) {
		console.log(data)
      let [gcjLat, gcjLng] = wgs84togcj02(Number(data.lat), Number(data.lng));
      uni.openLocation({
        latitude: Number(gcjLat), // 要去的纬度-地址
        longitude: Number(gcjLng), // 要去的经度-地址
        address: data.merAddress, // 要去的具体地址
        // name: data.merName, // 名称
      });
      // uni.navigateTo({
      // 	url: '/pages_h5/map/index?address=' + data.merAddress + '&longitude=' + gcjLng + '&latitude=' + gcjLat
      // })
    },
    async logggggin() {
      var e = await getUserInfo();
      if (e.code == 401) {
        this.showloginJs();
      } else {
        this.userInfo = e.data;
        this.ebUserId = uni.getStorageSync("uid");
        uni.setStorageSync("userInfo", this.userInfo);
        uni.hideLoading();
        this.showzhezhao = false;
      }
    },
    initUser() {
      getUserInfo()
        .then((res) => {
          if (res.code === 401) {
            uni.showToast({
              title: "您的登录已过期，请重新登录",
              icon: "none",
            });
            uni.clearStorage();
            this.showloginJs();
            // return;
          } else {
            this.userInfo = res.data;
            uni.setStorageSync("userInfo", res.data);
            uni.hideLoading();
            this.showzhezhao = false;
          }
        })
        .catch((err) => {
          console.error("获取用户信息失败", err);
        });
    },
    showloginJs() {
      let that = this;
      uni.login({
        provider: "weixin",
        success: (res) => {
          if (res.code) {
            that.autoLogin(res.code);
          } else {
            this.showzhezhao = false;
            uni.hideLoading();
            console.error("登录失败:", res.errMsg);
            uni.showToast({
              title: "微信登录失败，请稍后再试",
              icon: "none",
            });
          }
        },
        fail: (err) => {
          this.showzhezhao = false;
          uni.hideLoading();
          console.error("登录失败:", err);
          uni.showToast({
            title: "微信登录失败，请稍后再试",
            icon: "none",
          });
        },
      });
      // let storedOpenID = uni.getStorageSync("openID");
      // if (storedOpenID) {
      //   this.authKey = storedOpenID;
      //   this.initUser();
      // } else {

      // }
    },
    /* 免登录-每个界面调用 */
    async autoLogin(code) {
      let that = this;
      wx.getUserInfo({
        success(res) {
          const { nickName, avatarUrl, gender } = res.userInfo;
          programlogin({ code, avatar: avatarUrl, nickName, sex: gender }).then((response) => {
            const data = response.data;
            that.authKey = data.key;
            if (data.type === "login") {
              uni.setStorageSync("uid", data.uid);
              that.ebUserId = uni.getStorageSync("uid");
              uni.setStorageSync("token", data.token);
              uni.setStorageSync("userInfo_data", data);
              uni.setStorageSync("openID", data.key);
              that.initUser();
            } else {
              console.log("@@@@@@@@@@@@@@@-88888888888888");
              uni.showModal({
                title: "提示",
                content: "您的登录已过期或未登录，请重新登录。",
                success: (res) => {
                  if (res.confirm) {
                    uni.clearStorage();
                    that.showzhezhao = false;
                    uni.hideLoading();
                    /*  水卡 442鸡蛋 */
                    if (that.activeId == 442) {
                      uni.setStorageSync("activeId", that.activeId);
                      uni.setStorageSync("businessId", that.businessId);
                      uni.setStorageSync("isLaundry", that.isLaundry);
                      uni.switchTab({
                        url: "/pages_h5/myCenter/index", // 假设登录页面的路径为 /pages_h5/login/index
                      });
                    } else if (that.activeId == 444) {
                      uni.setStorageSync("ebMerId", that.businessId);
                      uni.setStorageSync("userType", 1);
                      uni.setStorageSync("activeId", that.activeId);
                      uni.setStorageSync("isLaundry", that.isLaundry);
                      uni.setStorageSync("businessId", that.businessId);
                      uni.switchTab({
                        url: "/pages_h5/myCenter/index", // 假设登录页面的路径为 /pages_h5/login/index
                      });
                    } else {
                      uni.setStorageSync("isLaundry", that.isLaundry);
                      uni.setStorageSync("businessId", that.businessId);
                      uni.setStorageSync("yaoiqngID", that.yaoiqngID);
                      uni.setStorageSync("userType", that.userType);
                      uni.switchTab({
                        url: "/pages_h5/myCenter/index", // 假设登录页面的路径为 /pages_h5/login/index
                      });
                    }
                  }
                },
                fail: () => {
                  that.showzhezhao = false;
                  uni.hideLoading();
                },
              });
            }
          });
        },
        fail: () => {
          uni.showToast({
            title: "您需要授权，才能获取您的信息！",
          });
        },
      });
    },
    /* 获取地址列表 */
    getAddressList() {
      cardAddressList({ pageNum: 1, pageSize: 9999, dictType: "water_card_sites" }).then((res) => {
        this.serchList = res.rows || [];
      });
    },
    /* 地址列表选择确认 */
    okAddress() {
      this.userInfoss.address = this.radioAddress;
      this.addreShow = false;
      this.cardShow = true;
      this.keyword = "";
      this.radioAddress = "";
    },
    noAddress() {
      this.addreShow = false;
      this.cardShow = true;
      this.userInfoss.address = "";
      this.radioAddress = "";
      this.keyword = "";
    },
    onInput(e) {
      // 清除之前的定时器，避免内存泄漏
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.serchList = this.serchList.filter((item) => {
          return item.dictLabel.includes(e);
        });
        this.timer = null; // 清除定时器引用
      }, 300); // 防抖延迟300ms
    },
    addreShowOpen() {
      this.cardShow = false;
      this.addreShow = true;
    },
    addShowDown() {
      this.addreShow = false;
    },
    closecardShow() {
      this.cardShow = false;
    },
    cardShowListShow() {
      this.cardShowList = false;
    },
    cardShowAdd() {
      this.cardShowList = false;
      this.cardShow = true;
    },
    groupChange(n) {
      /* 这个监听 */
    },
    radioChange(n) {},
    //点击电话按钮
    makeCall() {
      uni.makePhoneCall({
        phoneNumber: this.detailData.merPhone,
      });
    },

    //点击tab切换
    onchangetab(e) {
      this.tabs = e.name;
    } /** 评价列表 */,
    appraiseList() {
      /** 数据加载完成不再请求 */
      if (!this.hasMore) {
        return false;
      }
      appraiseList({
        activityId: this.activeId,
        limit: this.params.limit,
        page: this.params.page,
      }).then((res) => {
        this.hasMore = (res.data.list || []).length >= this.params.page;
        this.praiseList = this.praiseList.concat(res.data.list || []);
        this.params.page += 1;
      });
    },
    handleDetail(id) {
      uni.navigateTo({
        url: "/pages_h5/local_life/detailIndexLogin?id=" + id + "&activeId=" + this.activeId + "&infoType=" + this.type,
      });
    },
    clickActivityInfoByid(id) {
      clickActivityInfoByid({
        id,
      }).then((res) => {
        this.activeList = res.data || [];
        this.list1 = this.activeList && this.activeList.length > 0 ? [{ name: "活动" }, { name: "详情" }, { name: "评价" }] : [{ name: "详情" }, { name: "活动" }, { name: "评价" }];
        this.tabs = this.list1[0].name;
        /** 默认选中第一个 */
        if (res.data && res.data.length > 0) {
          this.checked = res.data[0].id;
          this.checkData = res.data[0];
          this.bannerList = [];
          res.data[0].icon.split(",").forEach((item) => {
            this.bannerList.push(this.imgurl + item);
          });
          // this.quanIcon = res.data[0].icon;
        }
      });
    },
    getMerInfoByidd(businessId, id) {
      getMerInfoByid({ id: businessId, isDefMerActive: this.type }).then((res) => {
        this.subOrderebUserId = res.data.ebMer.ebUserId;
        this.detailData = {};
        (res.data.activityList || []).forEach((item, key) => {
          if (item.id == id) {
            this.detailData = {
              ...item,
              categoryName: res.data.categoryName,
              merAvatar: res.data.ebMer.merAvatar,
              merName: res.data.ebMer.merName,
			  lng: res.data.ebMer.lng,
			  lat: res.data.ebMer.lat,
              merAddress: res.data.ebMer.merAddress,
              serviceScore: res.data.ebMer.serviceScore,
              merPhone: res.data.ebMer.merPhone,
              //   defMerActiveId: res.data.ebMer.defMerActiveId, //传递默认活动id
              //   businessId: res.data.ebMer.id, //传递商户id
              merBanner: item.icon,
            };
          }
        });
      });
    },
    addPay() {
      this.onGrab();
    },
    /** 立即抢购 */
    async onGrab() {
      var e = await getUserInfo();
      if (e.code == 401) {
        uni.showModal({
          title: "提示",
          content: "您的登录已过期或未登录，请重新登录。",
          success: (res) => {
            if (res.confirm) {
              uni.clearStorage();
              /*   水卡 442鸡蛋 */
              if (this.activeId == 442) {
                uni.setStorageSync("activeId", this.activeId);
                uni.setStorageSync("businessId", this.businessId);
                uni.setStorageSync("isLaundry", this.isLaundry);
                uni.switchTab({
                  url: "/pages_h5/myCenter/index", // 假设登录页面的路径为 /pages_h5/login/index
                });
              } else if (this.activeId == 444) {
                uni.setStorageSync("ebMerId", this.businessId);
                uni.setStorageSync("userType", 1);
                uni.setStorageSync("activeId", this.activeId);
                uni.setStorageSync("isLaundry", this.isLaundry);
                uni.setStorageSync("businessId", this.businessId);
                uni.switchTab({
                  url: "/pages_h5/myCenter/index", // 假设登录页面的路径为 /pages_h5/login/index
                });
              } else {
                uni.setStorageSync("isLaundry", that.isLaundry);
                uni.setStorageSync("businessId", that.businessId);
                uni.setStorageSync("yaoiqngID", that.yaoiqngID);
                uni.setStorageSync("userType", that.userType);
                uni.switchTab({
                  url: "/pages_h5/myCenter/index", // 假设登录页面的路径为 /pages_h5/login/index
                });
              }
            }
          },
        });
        return;
      }
      // this.loading = true;
      if (this.isWatercard == 0 || this.activeId == 444) {
        watercardList({ ebUserId: this.ebUserId }).then((res) => {
          if (res.code == 200) {
            if (res.rows && res.rows.length > 0) {
              this.cardList = res.rows;
              this.radiovalue1 = this.cardList[0].name + "-" + this.cardList[0].phone + "-" + this.cardList[0].cardNumber + "-" + this.cardList[0].address;
              this.cardShowList = true;
            } else {
              this.cardShow = true;
            }
          }
        });
      } else {
        // this.$refs.subOrder.handleOpen(this.checked);
        uni.navigateTo({
          url: "/pages_h5/index/components/subOrderNo?checked=" + this.checked + "&activeId=" + this.activeId + "&businessId=" + this.businessId + "&buyNumber=" + this.buyNumber,
        });
      }
      //    selectTicketById({ id: this.checked }).then((res) => {
      //      this.loading = false;
      //      this.subOrderData = res.data || {};
      //      this.subOrderData.activeName = this.detailData.name;
      //      this.subOrderData.merAvatar = this.detailData.merAvatar;
      //      this.subOrderData.isLaundry = this.isLaundry;
      //      this.subOrderData.isAuto = res.data.isAuto;
      //      this.subOrderData.ebUserId = this.subOrderebUserId;
      //      // uni.navigateTo({
      //      //   url: "/pages_h5/index/components/subOrderNo?subOrderData=" + JSON.stringify(this.subOrderData) + "&ebMerActivityTicketId=" + this.checked + "&ebMerActivityId=" + this.activeId + "&businessId=" + this.businessId+"&type="+this.type,
      //      // });

      //    });
    },
    /* 水卡信息添加提交 */
    submitCard() {
      this.$refs.$uForm
        .validate()
        .then((res) => {
          watercardAdd({
            name: this.userInfoss.name,
            phone: this.userInfoss.phone,
            cardNumber: this.userInfoss.phoneCard,
            address: this.userInfoss.address,
            ebUserId: this.ebUserId,
          }).then((res) => {
            this.subOrderData.remark = this.userInfoss.name + "-" + this.userInfoss.phone + "-" + this.userInfoss.phoneCard + "-" + this.userInfoss.address;
            this.cardShow = false;
            /*       this.$refs.subOrder.handleOpen(this.checked, this.yaoiqngID); */
            uni.navigateTo({
              url:
                "/pages_h5/index/components/subOrderNo?checked=" +
                this.checked +
                "&yaoiqngID=" +
                this.yaoiqngID +
                "&businessId=" +
                this.businessId +
                "&remark=" +
                this.subOrderData.remark +
                "&activeId=" +
                this.activeId,
            });
          });
        })
        .catch((errors) => {
          uni.$u.toast("请填写完整信息");
        });
    },
    /* 水卡信息选择 */
    cardShowListss() {
      this.subOrderData.remark = this.radiovalue1;
      this.cardShowList = false;
      uni.navigateTo({
        url:
          "/pages_h5/index/components/subOrderNo?checked=" +
          this.checked +
          "&yaoiqngID=" +
          this.yaoiqngID +
          "&businessId=" +
          this.businessId +
          "&remark=" +
          this.subOrderData.remark +
          "&activeId=" +
          this.activeId,
      });
      /*   this.$refs.subOrder.handleOpen(this.checked, this.yaoiqngID); */
    },
  },
};
</script>

<style scoped>
page {
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
}
.container {
  width: 100%;
  height: 100vh;
  position: relative;
}

.detail-header {
  height: 500rpx;
  width: 100%;
  z-index: -1;
}

.detail-content {
  padding: 15px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background-color: #fff;
  width: 85%;
  margin: 0 auto;
  margin-top: 10px;
  /* margin-top: -30px; */
  z-index: 10;
  position: relative;
  /* 添加 position 属性 */
}
.detail-contents {
  padding: 0 15px;
  width: 85%;
  margin: 0 auto;
  /* margin-top: -30px; */
  z-index: 10;
  position: relative;
  /* 添加 position 属性 */
}
.placeholder {
  margin-top: 20rpx;
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 26rpx;
  /* padding: 20rpx 40rpx; */
  gap: 20rpx;
  width: 100%;
}
.popupShow {
  overflow: hidden;
  position: fixed;
}
.dwadafad {
  width: 90%;
}
.acitbe_calsad {
  border: 1px solid #fa642f;
  margin-left: 5px;
  color: #fa642f;
  font-size: 12px;
  padding: 2px 3px;
  margin-top: 5px;
  border-radius: 3px;
}
.juan_label {
  border: 1px solid #000;
  margin-left: 5px;
  color: #000;
  font-size: 12px;
  padding: 2px 3px;
  margin-top: 5px;
  border-radius: 3px;
}
</style>
